let _Vue = null

export default class vueRouter {
  static install (vue) {
     // 1. 判断当前插件是否已经被安装
     if(vueRouter.install.installed){
       return 
     }
     vueRouter.install.installed = true
     // 2. 把vue构造函数记录到全局变量

     _Vue = vue
     // 3. 把创建Vue实例时候传入的router对象注入到Vue实例上

     //混入
     _Vue.mixin({
        beforeCreate () {
          if (this.$options.router) {
            _Vue.prototype.$router = this.$options.router
          }
        }
     })

     constructor (options){
        this.options = options
        this.routeMap = {}
        this.data = _Vue.observable({
          current : '/'
        })
     }
     init () {
       this.createRouteMap()
       this.initComponents(_vue)
       this.initEvent()
     }

     createRouteMap () {
       // 遍历所有的路由规则，把路由规则解析成键值对的形式 存储到routeMap中
       this.options.routes.forEach(route => {
         this.routeMap[route.path] = route.component
       })
     }

     initComponents (Vue)  {
       Vue.component('router-link', {
         props: {
           to: String
         },
         render (h) {
           return h('a', {
             attrs:{
               href: this.to
             },
             on: {
               click: this.handleClick
             }
           }, [this.$slots.default])
         },
         methods: {
           handleClick(e) {
             history.pushState({}, '', this.to)
             this.$router.data.current = this.to
             e.preventDefault()
           }
         }
        //  template: '<a :href="to"><slot></slot></a>'
       })

       const self = this
       Vue.component('router-view', {
         render(h) {
           const component = self.routerMap[self.data.current]
           return h(component)
         }
       })
     }

     initEvent () {
       window.addEventListener('popstate', () => {
         this.data.current = window.location.pathname
       })
     }
     
  }
}